<template>
  <div class="flow-main" :style="{ height: screenHeight + 'px' }">
    <div class="flow-main-left" :class="{ 'sidebar-collapsed': !sidebarVisible }">
      <sidebar ref="sidebar" />
    </div>
    <div class="flow-main-right" :class="{ 'sidebar-collapsed': !sidebarVisible }">
      <router-view />
      <div class="toggle-sidebar-btn" @click="handleSidebarBtnClicked(!sidebarVisible)">
        <img v-if="sidebarVisible" src="~@/assets/bar/collapse.svg" />
        <img v-else src="~@/assets/bar/expand.svg" />
      </div>
    </div>
  </div>
</template>

<script>
import sidebar from '../../components/sidebar/index.vue'
import emitter from '@/utils/eventBus'

export default {
  name: 'index',
  components: {
    sidebar
  },
  data() {
    return {
      screenWidth: (window.screen.width / 5) * 3 + 100,
      screenHeight: window.innerHeight - 50, // 初始高度，减去可能的标题栏或边距
      sidebarVisible: true
    }
  },
  created() {
    const screenWidth = window.screen.width
    const screenHeight = window.screen.height
    window.ipcRenderer &&
      window.ipcRenderer.send('toMain', {
        username: 'noUser',
        token: 'test',
        screenWidth: screenWidth,
        screenHeight: screenHeight
      })
    this.$emit('updateBar')
    this.updateHeight()
    window.addEventListener('resize', this.updateHeight) // 监听窗口大小变化
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateHeight) // 清理事件监听器
  },
  methods: {
    updateHeight() {
      this.screenHeight = window.innerHeight - 50 // 更新为窗口高度，减去标题栏
    },
    handleSidebarBtnClicked(visible) {
      this.sidebarVisible = visible
      emitter.emit('toggle-sidebar', visible)
    }
  }
}
</script>

<style scoped>
.flow-main {
  width: auto;
  border-left: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  overflow-y: hidden;
  color: #151717;
}

.flow-main-left {
  width: 20%;
  height: 100%;
  float: left;
  background-color: rgba(221, 228, 234, 0.9);
  border-bottom-left-radius: 20px;
  transition: width 0.3s ease;
}

.flow-main-right {
  width: 80%;
  height: 100%;
  float: left;
  background-color: white;
  transition: width 0.3s ease;
  position: relative;
}

.flow-main-left.sidebar-collapsed {
  width: 0;
  overflow: hidden;
}

.flow-main-right.sidebar-collapsed {
  width: 100%;
}

.toggle-sidebar-btn {
  position: absolute;
  left: 10px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.toggle-sidebar-btn:hover {
  transform: scale(1.1);
}

.toggle-sidebar-btn img {
  width: 20px;
  height: 20px;
}
</style>
